<template>
  <div id="app">
    <div class="box">
      <VueCodemirror  id="editor" v-model="code" :options="options"></VueCodemirror>
      <section id="preview">
        <iframe id="frame" frameborder="0"></iframe>
      </section>
    </div>
  </div>
</template>

<script>
import VueCodemirror from 'vue-codemirror';
import 'codemirror/lib/codemirror.css';

export default {
  name: 'App',
  components: {
    VueCodemirror
  },
  data() {
    return {
      code: 'Hello World!', // 编辑器绑定的值
      // 默认配置
      options: {
        tabSize: 2, // tab
        styleActiveLine: true, // 高亮选中行
        lineNumbers: true, // 显示行号
        styleSelectedText: true,
        line: true,
        foldGutter: true, // 块槽
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
        mode: 'text/html',
        // hint.js options
        hintOptions: {
          // 当匹配只有一项的时候是否自动补全
          completeSingle: false
        },
        // 快捷键 可提供三种模式 sublime、emacs、vim
        keyMap: 'sublime',
        matchBrackets: true,
        showCursorWhenSelecting: true,
        theme: 'monokai', // 主题
        extraKeys: { 'Ctrl': 'autocomplete' } // 可以用于为编辑器指定额外的键绑定，以及keyMap定义的键绑定
      }
    }
  },
  watch: {
    code: {
      handler: function (newval) {
        const frame = document.querySelector('#frame')
        frame.contentWindow.document.open()
        frame.contentWindow.document.write(newval)
      }
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.box {
  display: flex;
  height: 100%;
}
#editor {
  text-align: left;
  width: 30%;
  height: 100%;
}
#preview {
  flex: 1;
}
</style>

<!--https://blog.csdn.net/Sakura1998gis/article/details/114067643-->
